import React from 'react'
import {inject, observer} from 'mobx-react';
import { Icon,Tools,TabBar
} from 'weaver-mobile';
import {  withRouter } from 'react-router-dom';
import CategoryRoute from './CategoryRoute'

const getLabel = Tools.getLabel;

@withRouter
@inject('netdiskStore')
@observer
class Netdisk extends React.Component {
  
  componentDidMount() {
    const {netdiskStore} = this.props;
    netdiskStore.listStore.getMyList();
    netdiskStore.getwhietlist();
  }
  render() {
    const {netdiskStore} = this.props;
    let {selectedTab,listStore } = netdiskStore;
    let {shareCancle,fileDel,canReader} = listStore;
    if(!canReader){
      if(shareCancle){
        return (
          <div className="wea-doc-whitebg">
            <div className="wea-doc-error">
              <Icon type="no-data" size="lg" />
              <div>{getLabel(516293, "分享已被取消")}</div>
            </div>
          </div>
        );
      }
      if(fileDel){
        return (
          <div className="wea-doc-whitebg">
            <div className="wea-doc-error">
              <Icon type="no-data" size="sm" />
              <div>{getLabel(516294, "文件已被删除")}</div>
            </div>
          </div>
        );
      }
    }
    
    return (
      <div className="wea-netdisk-whitebg">
        {this.getTabList(netdiskStore.isOpenFile)}
        <div className={netdiskStore.isOpenFile?"wea-netdisk-tabbar-hidden":"wea-netdisk-tabbar"}>
          <TabBar
            barTintColor="white"
          >
            <TabBar.Item
              title={getLabel(129207, '我的云盘')}
              key="disk"
              icon={<Icon type="headquarters"></Icon>}
              selectedIcon={<Icon type="headquarters"></Icon>}
              selected={selectedTab === 'disk'}
              onPress={() => this.chooseSelectedTab('disk')}
            />
            <TabBar.Item
              title={getLabel(33310, '我的分享')}
              key="myShare"
              icon={<Icon type="organization"></Icon>}
              selectedIcon={<Icon type="organization"></Icon>}
              selected={selectedTab === 'myShare'}
              onPress={() => this.chooseSelectedTab('myShare')}
            />
            <TabBar.Item
              title={getLabel(129146, '同事的分享')}
              key="shareMy"
              icon={<Icon type="return"></Icon>}
              selectedIcon={<Icon type="return"></Icon>}
              selected={selectedTab === 'shareMy'}
              onPress={() => this.chooseSelectedTab('shareMy')}
            />
          </TabBar>
        </div>
      </div>
    )
  }
  
  getTabList = (isOpenFile) => {
    return (
      <div className="netdisk-search-list" style={isOpenFile?{bottom:'0'}:{bottom:'50px'}}>
        <CategoryRoute />
      </div>
    );
  }
  
  chooseSelectedTab = (tab) => {
    const {netdiskStore, location, history} = this.props, {pathname} = location;
    netdiskStore.setSelectedTab(tab);
    if (pathname !== '/netdisk') {
      history.push('/netdisk');
    }
  }
  
}

export default Netdisk;